<template>
  <span class="tt-icon-user tt-input-icon" 
    :class="{
      'tt-state-empty': props.state==='empty',
      'tt-state-not-empty': props.state==='not_empty',
      'tt-state-error': props.state==='error'
      }">
    <tt-icon-user v-if="props.icon==='user'"></tt-icon-user>
    <tt-icon-password v-if="props.icon==='password'"></tt-icon-password>
  </span>
</template>

<script lang='ts' setup>
import TtIconUser from '../icons/TtIconUser.vue'
import TtIconPassword from '../icons/TtIconPassword.vue'
import { onMounted, watch } from 'vue'


const props = defineProps({
  icon: {
    type: String,
    default: 'user'
  },
  state: {
    type: String,
    default: 'empty'
  }
})
watch(()=>props.state, (nv, ov)=>{
  console.log(props.icon, nv, ov)
})
onMounted(()=>{
  console.log("props_:", props.icon)
})

</script>

<style scoped lang="scss">
.tt-icon-user{
  width: .22rem;
  height: .25rem;
}
.tt-state-error{
  fill: red
}
.tt-state-not-empty{
  fill: #a6a6a9;
}
.tt-state-empty{
  fill: #dedede;
}
</style>